<template>
  <view class="content">
    <view style="height: 30rpx"></view>
    <view class="qiYe" @click="toQiYeDetails">
      <view v-if="company">
        <view class="title">{{ company.name }}</view>
        <view class="name">{{ company.name }}</view>
      </view>
      <view v-if="company">
        <image :src="pic + company.logo" mode="scaleToFill" />
      </view>
    </view>
    <view class="titles">
      <view class="left"></view>
      <view class="name">在招职位</view>
    </view>
    <view
      class="items"
      v-for="item in recruitList"
      :key="item.id"
      @click="toXq(item.id)"
    >
      <view class="lie">
        <view class="max-text">{{ item.name }}</view>
        <view class="min-text">{{
          `${item.address[0]}-${item.address[1]}-${item.address[2]}`
        }}</view>
      </view>
      <view class="lie">
        <view class="text-color" style="font-size: 28rpx; font-weight: 600">{{
          item.xname
        }}</view>
      </view>
      <view class="flex">
        <view v-for="(items, index) in item.fulilabels" :key="items.id">
          <y-tag
            v-if="index < 4"
            :text="items.name"
            bgcolors="#efefef"
            color="#000000"
          ></y-tag>
        </view>
        <view v-if="item.fulilabels.length > 4">...</view>
      </view>
    </view>
    <u-empty
      v-if="recruitList.length == 0"
      mode="list"
      icon="http://cdn.uviewui.com/uview/empty/list.png"
    />
  </view>
</template>

<script>
import yTag from "@/components/y-tag/index";
export default {
  name: "tab-1",
  components: {
    yTag,
  },
  data() {
    return {
      recruitList: [],
      id: "",
      company: {},
      pic: this.$IMG_URL,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getRecruitList();
  },
  methods: {
    async getRecruitList() {
      const data = await this.http.get("recruit/index", { id: this.id });
      Object.keys(data.data).map((item) => {
        if (item === "company") {
          this.company = data.data.company;
        } else {
          data.data[item].address = data.data[item].address.split("/");
          this.recruitList.push(data.data[item]);
        }
      });
    },
    toXq(id) {
      uni.navigateTo({
        url: "/pages/tab2/details?type=zhaopin&id=" + id,
      });
    },
    toQiYeDetails() {
      uni.navigateTo({
        url: "/pages/tab2/qiYeDetails?id=" + this.id,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.items {
  padding: 20rpx;
  background: #fff;
  opacity: 1;
  margin: 0rpx 30rpx 30rpx;
  border-radius: 10rpx;
  align-items: center;
  .lie {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .sex {
      font-size: 24rpx;
    }
  }
}
.qiYe {
  padding: 20rpx;
  display: flex;
  border-radius: 20rpx;
  justify-content: space-between;
  background-image: linear-gradient(to right, #87aef6, #6190f7);
  margin: 0 25rpx;
  align-items: center;
  color: white;
  image {
    width: 150rpx;
    height: 150rpx;
  }
  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
  }
  .name {
    font-size: 24rpx;
  }
}
.titles {
  display: flex;
  padding-bottom: 40rpx;
  padding-top: 40rpx;
  .left {
    width: 16rpx;
    background-color: #4777f6;
    border-radius: 50rpx;
    margin: 0 20rpx;
  }
  .name {
    font-weight: 800;
  }
}
</style>